<template>
	<view class="container">
		
		<!-- 媒体部分 -->
		<view class="shipinpart">
			<view class="shipinpart-media">
				<!-- 视频 -->
				<video v-if="videostate === 'video'" class="video" id="myVideo" 
				:model="menuinfo" :src="videosrc" 
				@error="videoErrorCallback"
				@timeupdate="video_timeUpdate" 
				@fullscreenchange="fullscreen" 
				@play='video_onplay'
				@pause='video_onpause'
				@ended='video_onend'
				:controls="video_controls" 
				autoplay show-center-play-btn enable-play-gesture>
				</video>
				<image src="https://zsff.sxjiangyan.com/uploads/images/20201029/8bf235d0a407784c9c3ae8dda95b0bf6.jpg" mode="aspectFill" ></image>
				
			</view>
			<view class="shipinpart-info">
				<text class="info-span1">spring boot</text>
				<view class="info-span2">
					<text>看书的速度实打实大苏打</text>
					<text>更新中</text>
				</view>
				<view class="info-span5">
					<text class="info-span3">
						<text>100课时</text>
						<text>|</text>
						<text>100人学过</text>
					</text>
					<text class="info-span4" v-if="action=='' ">￥55</text>
					<text class="info-span4" v-if="action=='credit' ">100积分</text>
					<text class="info-span4" v-if="action=='seckill' ">秒杀价:￥100</text>
					<text class="info-span4" v-if="action=='pintuan' ">拼团价:￥100</text>
				</view>
			</view>
		</view>
		
		
		
		<!-- 课程介绍、课程目录、附件、用户评价 -->
		<view class="kechengpart">
			<view class="kechengpart-title">
				<view class="kechengpart-title-item" v-for="(item, index) in kechengList" :key="index">
					<view @click="muluchange(index)" :class="{btna:btnnum == index}">{{item}}</view>
					<text :class="{_underline: btnnum == index}"></text>
				</view>
			</view>
			<view class="kechengpart-content">
				<!-- 课程介绍 -->
				<view class="kcjs" :class="{dis:btnnum == 0}" :model="teacher">
					<view class="kcjs-lecturer">
						<view class="kcjs-lecturer-top">
							<image src="/static/course/kechengjiangshi.png" mode=""></image>
							<text>课程讲师</text>
						</view>
						<view class="jiangshi-right" @click="jsdetail">
							<text>讲师主页</text>
							<image src="/static/course/jt.png" mode=""></image>
						</view>
						<view class="kcjs-lecturer-bottom" >
							<image :src="teacher.img?(HOST_URL + teacher.img):'' " mode="aspectFit"></image>
						</view>
					</view>
					<view class="kcjs-brief">
						<view class="kcjs-brief-top">
							<image src="/static/course/kechengjianjie.png" mode=""></image>
							<text>课程简介</text>
						</view>
						<view class="kcjs-brief-center">
							<u-parse :content="menuinfo.introduce"></u-parse>
						</view>
					</view>
				</view>
				
				
				<!-- 课程目录 -->
				<view class="kcml" style="margin-bottom: 122upx;" :class="{dis:btnnum == 1}">
					<view class="kcml-list" v-for="(item,index) in courses" :key="item.id" @click="openvideo(item)">
						<view class="kcml-list-left">
							<text class="yinpin" v-if="item.media === 'audio'">音频</text>
							<text class="shipin" v-else-if="item.media === 'video'">视频</text>
							<text class="tuwen" v-else>图文</text>
							<text>{{(index+1)+' . '+item.coursename}}</text>
						</view>
						<view class="kcml-list-right" v-if="!is_free && item.is_pay==0">
							<view v-if="item.is_sk == 1">
								<text v-if="item.media == 'video'">试看</text>
								<text v-else-if="item.media == 'audio'">试听</text>
								<text v-if="item.media == 'tuwen'">试读</text>
							</view>
							<image v-else-if="item.is_sk == 0" src="/static/course/colock.png" mode=""></image>
						</view>
					</view>
				</view>
				
				
			
				<!-- 用户评价 -->
				<view class="yhpj" :class="{dis:btnnum == 2}">
					<view class="yhpj-list" v-if="comment.length > 0">
						<view class="item" v-for="(item, index) in comment" :key="index">
							<image class="item-left" :src="item.avatar" mode="aspectFit"></image>
							<view class="item-right">
								<view class="item-right-top">
									<text>{{item.nickname}}</text>
									<text>{{item.addtime}}</text>
								</view>
								<view class="item-right-bottom">
									<text>{{item.comment}}</text>
								</view>
							</view>
						</view>
					</view>
					<image v-else class="nopl" src="/static/course/nopl.png" mode="aspectFit"></image>
				</view>
			</view>
		</view>
		
		
		<!-- 立即购买 -->
		<view class="buy" v-if="btnnum <= 2">
			<view class="buy-left" @click="dingyue">
				<image src="/static/course/shoucang.png" mode=""></image>
				<text v-if="!is_dingyue">收藏</text>
				<text v-if="is_dingyue">已收藏</text>
			</view>
			<button class="buy-left sharebtn" open-type="share">
				<image src="/static/course/fenxiang.png" mode=""></image>
				<text style="color: #848484;">分享</text>
			</button>
			<view class="buy-right" @click="pay1" v-if="!is_free && action=='' ">立即购买</view>
			<view class="buy-right" @click="exchange" v-if="!is_free && action=='credit' ">立即兑换</view>
			<view class="buy-right" @click="seckill" v-if="!is_free && action=='seckill' ">立即秒杀</view>
			<view class="buy-right" @click="pintuan" v-if="!is_free && action=='pintuan' ">开始拼团</view>
			<view class="buy-right" v-if="is_free">免费</view>
		</view>
		
		<!-- <zaudio></zaudio> -->
		
	</view>
</template>

<script>
	import uParse from '@/components/uParse/src/wxParse.vue'
	import {HOST_URL} from '@/request/request'
	/* import uParse from '@/components/gaoyia-parse/parse.vue'
	import { getCourseDetails } from '@/request/courses.js'
	import {HOST_URL} from '@/request/request'
	import {checkUserinfo} from '@/request/checkUserinfo' */
	// #ifndef MP-WEIXIN
	const innerAudioContext = uni.createInnerAudioContext()
	// #endif
	// #ifdef MP-WEIXIN
	const innerAudioContext = uni.getBackgroundAudioManager();
	// #endif
	export default {
		components:{
			uParse
		},
		data() {
			return {
				kechengList: ['课程介绍', '目录', '评价'],
				btnnum: 0,
				currentTime:'',
				coursemenus: [],
				menuinfo: [],
				teacher: [],
				courses: [],
				comment: [],
				HOST_URL,
				videostate: '',
				durationTime: "", //音频的总时长
				coursehour: 0 ,// 课时
				audio_paused:true,
				audio_progress:0,
				gaosi:false,
				t1:'',
				t2:'',//video计时器id
				t3:'',//audio计时器id
				videosrc:'',
				free_time:'',
				video_controls:true,
				videofullscreen:false,
				menuid:'',
				sonid:'',
				videoStudyTime: 0,//秒
				audioStudyTime: 0,//秒
				is_free:false,
				son_is_pay:false,
				uid:'',
				is_dingyue:false,
				videoContext:{},
				creditinfo:{},
				action:'',
				seckillinfo:{},
				pintuaninfo:{}
			}
		},
		onShareAppMessage(res) {
			
			
		},
		onReady: function(res) {
			// #ifndef MP-ALIPAY
			this.videoContext = uni.createVideoContext('myVideo')
			// #endif
			
		},
		onLoad(e) {
			
		},
		onShow(){
			
			
		},
		
		onUnload() {
			
		},
		
		methods: {
			
			muluchange(e) {
				this.btnnum = e
			}
		}
	}
</script>
<style lang="less" scoped>
page{
	background-color: #f3f3f3;
	font-family: SimHei;
}
.container {
	background-color: #f3f3f3;
}
// 视频部分
.shipinpart {
	height: 630upx;
	background-color: #fff;
	&-media {
		height: 400upx;
		background-color: #fff;
		.video {
			width: 750upx;
			height: 400upx;
		}
		.audio_bg{
			position: absolute;
			z-index: -19;
			transition:all .4s cubic-bezier(0.42,0,0.58,1) 0s;
		}
		.donghua(@DHname){
			@keyframes @DHname {
				0%{
					filter: blur(0upx);
				}
				5%{
					filter: blur(1upx);
				}
				10%{
					filter: blur(2upx);
				}
				15%{
					filter: blur(3upx);
				}
				20%{
					filter: blur(4upx);
				}
				25%{
					filter: blur(5upx);
				}
				30%{
					filter: blur(6upx);
				}
				35%{
					filter: blur(7upx);
				}
				40%{
					filter: blur(8upx);
				}
				45%{
					filter: blur(9upx);
				}
				50%{
					filter: blur(10upx);
				}
				55%{
					filter: blur(9upx);
				}
				60%{
					filter: blur(8upx);
				}
				65%{
					filter: blur(7upx);
				}
				70%{
					filter: blur(6upx);
				}
				75%{
					filter: blur(5upx);
				}
				80%{
					filter: blur(4upx);
				}
				85%{
					filter: blur(3upx);
				}
				90%{
					filter: blur(2upx);
				}
				95%{
					filter: blur(1upx);
				}
				100%{
					filter: blur(0upx);
				}
			}
		};
		.donghua(myDongHua);
		.animation(@animation-name,@animation-duration,@animation-iteration-count){
		    animation: @arguments;
		}
		.gaosi_filter{
			.animation(myDongHua,4s,infinite);
			transition:all 4s cubic-bezier(0.42,0,0.58,1) 0s;
		}
		image {
			width: 100%;
			height: 400upx;
		}
		.audio {
			width: 100%;
			height: 400upx;
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 19;
			padding-bottom: 20upx;
			.bofang {
				width: 80upx;
				height: 80upx;
				image {
					width: 80upx;
					height: 80upx;
				}
			}
			&-wrapper {
				width:100%;
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				bottom: 0;
				color: #333;
				background-image: linear-gradient(to bottom, rgba(255,255,255,.25), #fff);
				.prev, .next {
					width: 48upx;
					height: 44upx;
					margin: 0 20upx;
				}
				.audio-number {
					font-size: 24upx;
				}
				.audio-slider {
					flex: 1;
				}
			}
		}
	}
	&-info {
		z-index: 19;
		padding: 0 20upx;
		display: flex;
		flex-direction: column;
		.info-span1 {
			margin-top: 35upx;
			font-size: 32upx;
			font-weight: 700;
			color: #070707;
			letter-spacing: 5upx;
		}
		.info-span2 {
			letter-spacing: 5upx;
			font-size: 26upx;
			color: #373737;
			margin-top: 16upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			text:nth-child(2) {
				letter-spacing: 1upx;
				width: 110upx;
				height: 43upx;
				border-radius: 10upx;
				background-color: #e4edff;
				color: #4b89ff;
				text-align: center;
				line-height: 43upx;
				margin-left: 50upx;
				margin-right: 30upx;
				box-shadow:0upx 2upx 3upx 1upx #8dbeff;
			}
		}
		.info-span5{
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.info-span3 {
			margin-top: 18upx;
			font-size: 24upx;
			color: #b3b3b3;
			display: flex;
			align-items: center;
			text:nth-child(2) {
				margin: 0 15upx;
			}
		}
		.info-span4 {
			margin-top: 22upx;
			color: #ff6229;
			font-size: 32upx;
			margin-right: 40upx;
		}
	}
}


// 课程部分
.kechengpart {
	margin-top: 10upx;
	&-title{
		height: 125upx;
		// background-color: red;
		background-color: #fff;
		padding-top: 45upx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-around;
		&-item {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			view {
			font-size: 30upx;
			color: #575757;
			}
			.btna { // 需要追加到view上的class
				font-weight: 700;
				color: #131313;
			}
			._underline { // 需要追加到view下方的下划线class
				width: 70upx;
				height: 7upx;
				background-color: #2f77ff;
				border-radius: 5upx;
				margin-top: 15upx;
			}
		}
		
	}
	
	&-content {
		// 课程简介
		.kcjs {
			padding: 0 20upx;
			background-color: #fff;
			display: none;
			&-lecturer {
				&-top {
					height: 60upx;
					display: inline-flex;
					image {
						width: 47upx;
						height: 33upx;
						margin-top: 4upx;
					}
					text {
						font-size: 26upx;
						font-weight: 700;
						color: #020202;
						margin-left: 15upx;
					}
				}
				.jiangshi-right {
					display: inline-flex;
					align-items: center;
					float: right;
					text {
						font-size: 22upx;
						color: #6d6d6d;
						margin-right: 0;
					}
					image {
						width: 20upx;
						height: 22upx;
						margin-left: 5upx;
					}
				}
				&-bottom {
					display: flex;
					align-items: center;
					justify-content: space-between;
					image{
						width: 100%;
						height: 400upx;
					}
					.jiangshi-left {
						display: flex;
						align-items: center;
						image {
							width: 80upx;
							height: 80upx;
							border-radius: 40upx;
						}
						text {
							font-size: 26upx;
							color: #333;
							margin-left: 20upx;
						}
					}
					.jiangshi-right {
						display: flex;
						align-items: center;
						text {
							font-size: 26upx;
							color: #C0C0C0;
							margin-right: 0;
						}
						image {
							width: 20upx;
							height: 26upx;
							margin-left: 5upx;
						}
					}

				}
			}
			&-brief{
				margin-top: 40upx;
				margin-bottom: 150upx;
				&-top {
					height: 75upx;
					display: flex;
					image {
						width: 53upx;
						height: 49upx;
					}
					text {
						font-size: 26upx;
						font-weight: 700;
						color: #020202;
						margin-left: 15upx;
						margin-top: 4upx;
					}
				}
				&-center {
					padding-bottom:30upx;
					text {
						font-size: 26upx;
						color: #313131;
					}
				}
			}
		}
		
		// 课程目录
		.kcml {
			display: none;
			padding: 0 20upx;
			background-color: #fff;
			&-list {
				padding: 20upx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				border-bottom: 1rpx solid #eee;
				&-left {
					width: 436upx;
					height: 60upx;
					line-height: 60upx;
					.yinpin {
						display: inline-block;
						width: 64upx;
						height: 32upx;
						font-size: 20upx;
						color: #ff6969;
						border: 2upx solid #ff6969;
						border-radius: 5upx;
						box-sizing: border-box;
						text-align: center;
						line-height: 28upx;
						margin-right: 15upx;
						vertical-align: middle;
					}
					.shipin {
						display: inline-block;
						width: 64upx;
						height: 32upx;
						font-size: 20upx;
						color: #398cff;
						border: 2upx solid #398cff;
						border-radius: 5upx;
						box-sizing: border-box;
						text-align: center;
						line-height: 24upx;
						margin-right: 15upx;
						vertical-align: middle;
					}
					.tuwen {
						display: inline-block;
						width: 64upx;
						height: 32upx;
						font-size: 20upx;
						color: #8bc34a;
						border: 2upx solid #8bc34a;
						border-radius: 5upx;
						box-sizing: border-box;
						text-align: center;
						line-height: 24upx;
						margin-right: 15upx;
						vertical-align: middle;
					}
					text:nth-child(2) {
						font-size: 25upx;
						color: #070707;
						display: inline-block;
						white-space: nowrap; 
						width: 80%; 
						overflow: hidden;
						text-overflow: ellipsis;
						vertical-align: middle;
					}
				}
				&-right {
					text {
						font-size: 24upx;
						color: #007AFF;
						vertical-align: middle;
					}
					image {
						width: 30upx;
						height: 30upx;
						vertical-align: middle;
					}
				}
			}
		}
		
		// 用户评价
		.yhpj {
			display: none;
			text-align: center;
			margin-bottom: 140upx;
			background-color: #fff;
			padding: 30rpx 0;
			&-list {
				.item {
					display: flex;
					padding: 0 20upx;
					margin-top: 40upx;
					&-left {
						width: 100upx;
						height: 100upx;
						border-radius: 50%;
						margin-right: 20upx;
					}
					&-right {
						display: flex;
						flex-direction: column;
						&-top {
							display: flex;
							align-items: center;
							text:nth-child(1) {
								font-size: 32upx;
								color: #333;
							}
							text:nth-child(2) {
								font-size: 26upx;
								color: #999;
								margin-left: 20upx;
							}
						}
						&-bottom {
							max-width: 500upx;
							// height: 60upx;
							margin-top: 10upx;
							padding: 20upx;
							border-radius: 10upx;
							background-color: #fff;
							text-align: left;
							text {
								font-size: 30upx;
								font-weight: 400;
								color: #333;
							}
						}
					}
				}
			}
		}
		.nopl{
			width: 334upx;
			height: 243upx;
			margin-top: 20upx;
		}
		.dis{
			display: block;
		}
	}
}


.buy {
	width: 100%;
	height: 122upx;
	background-color: #fff;
	position: fixed;
	bottom: 0;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	border-radius: 40upx 40upx 0 0;
	border-top: 1rpx solid #eee;
	&-left {
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		align-items: center;
		image {
			width: 37upx;
			height: 37upx;
		}
		text {
			margin-top: 15upx;
			font-size: 24upx;
			color: #ff6229;
		}
	}
	.sharebtn {
	  margin: 0;
	  padding: 0;
	  outline: none;
	  border-radius: 0;
	  background-color: transparent;
	  line-height: inherit;
	  width: max-content;
	}
	.sharebtn:after {
	  border: none;
	}
	&-right {
		width: 450upx;
		height: 80upx;
		background-image: linear-gradient(to right, #4498ff, #1763ff);
		border-radius: 80upx;
		font-size: 34upx;
		font-weight: 700;
		color: #fff;
		// border: 3upx solid #fff;
		text-align: center;
		line-height: 80upx;
		box-shadow: 0rpx 2rpx 2rpx 1rpx #8dbeff;
		letter-spacing: 7rpx;
	}
}
</style>
